<template>
  <div>
    <div class="banner" @click="changeShow">
      <div class="banner-img">
        <img :src="bannerImg">
      </div>
      <div class="banner-info">
        <div class="banner-infoT">
          {{this.sightName}}
        </div>
        <div class="banner-infoI">
          <span class="iconfont">&#xe692;</span>
          {{this.gallaryImgs.length}}
        </div>
      </div>
    </div>
    <router-link tag="div" to="/" class="banner-last">
      <span class="iconfont iconfont-last">&#xe624;</span>
    </router-link>
    <fa-de>
      <common-banner :imgs="gallaryImgs" v-show="showBanner" @changeShowClose="Close"></common-banner>
    </fa-de>
  </div>
</template>

<script>
  import CommonBanner from 'combanner/combanner/banner'
  import FaDe from 'combanner/fade/fade'
  export default {
    name: "Banner",
    props:{
      sightName:String,
      bannerImg:String,
      gallaryImgs:Array
    },
    data (){
      return {
        showBanner:false
      }
    },
    methods:{
      changeShow (){
        this.showBanner = true
      },
      Close (){
        this.showBanner = !this.showBanner
      }
    },
    components:{
      CommonBanner,
      FaDe
    }
  }
</script>

<style scoped lang="stylus">
  .banner{ overflow: hidden;height: 0;padding-bottom: 55%;position: relative;}
  .banner-img{ width: 100%}
  .banner-info{ position: absolute;left: 0;bottom: 0;right: 0;line-height: .62rem;background-color: rgba(0,0,0,.4);
  color: #ffffff;display: flex;
  }
  .banner-infoT{ display: flex;flex: 1;line-height: .62rem;text-align: center;padding-left:.2rem;font-size: .32rem}
  .banner-infoI{ padding-right: .4rem;}
  .banner-last{ padding: .1rem .1rem;background-color: rgba(0,0,0,.4);position: absolute;top:.1rem;left:.1rem;color: #fff;
    border-radius: 50%;text-align: center;
  }
  .iconfont-last{ font-size: .6rem;cursor: pointer}
</style>
